<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>上传课程</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css"/>
</head>

<body>
<% include("../layout/loading.html"){} %>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input id="keywords"placeholder="请输入视频标题" type="text" class="layui-input" autocomplete="off" />
                    </div>
                    <div class="layui-inline">
                        <button lay-filter="btnSearch" lay-submit type="submit" class="layui-btn icon-btn"><i class="layui-icon layui-icon-search"></i>搜索</button>
                        <button lay-filter="btnReset" lay-submit type="submit" class="layui-btn icon-btn layui-btn-normal"><i class="layui-icon layui-icon-refresh"></i>重置</button>
                        <button lay-filter="btnAdd" lay-submit type="submit" class="layui-btn icon-btn layui-btn-warm "><i class="layui-icon layui-icon-add-1"></i>新增</button>
                        <button lay-filter="btnDel" lay-submit type="submit" class="layui-btn icon-btn layui-btn-danger"><i class="layui-icon layui-icon-delete"></i>删除</button>
                    </div>
                </div>
            </div>

            <div class="layui-tab layui-tab-card" lay-filter="types">
                <ul class="layui-tab-title">
                  <li class="layui-this">视频</li>
                  <li>音频</li>
                  <li>重点词汇</li>
                  <li>跟读训练</li>
                </ul>
                <div class="layui-tab-content">
                  <div class="layui-tab-item layui-show"><table class="layui-table" id="type1" lay-filter="TABLE"></table></div>
                  <div class="layui-tab-item"><table class="layui-table" id="type2" lay-filter="TABLE"></table></div>
                  <div class="layui-tab-item"><table class="layui-table" id="type3" lay-filter="TABLE"></table></div>
                  <div class="layui-tab-item"><table class="layui-table" id="type4" lay-filter="TABLE"></table></div>
                </div>
              </div>            
            <!-- <table class="layui-table" id="TABLE" lay-filter="TABLE"></table> -->
        </div>
    </div>

</div>

<!-- js部分 -->
<script type="text/javascript" src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/js/common.js"></script>
<script>
    layui.use(["layer", "form", "table", "util","upload","element" ], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var upload = layui.upload;
        var element = layui.element;

        // 音频
        var cols1=[
            {"fixed":"left",type:"checkbox",width:50}
            ,{"title":"编号",type:"numbers",width:50}
            ,{"title":"视频标题",field:"videoName"}
            // ,{"title":"封面",field:"picUrl"}
            ,{title:"封面",field:"picUrl",templet: d=>["<a target='_blank' href='",d.picUrl,"' ><img src='",d.picUrl,"' /></a>"].join("") }
            ,{"title":"视频",field:"videoUrl"}
            // ,{"title":"音频",field:"voiceUrl"}
            ,{"title":"排序",field:"serialNumber"}
            ,{"title":"操作",toolbar:'<div><a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a></div>'}
        ];
        // 音频
        var cols2=[
            {"fixed":"left",type:"checkbox",width:50}
            ,{"title":"编号",type:"numbers",width:50}
            ,{"title":"音频标题",field:"videoName"}
            // ,{"title":"封面",field:"picUrl"}
            ,{title:"封面",field:"picUrl",templet: d=>["<a target='_blank' href='",d.picUrl,"' ><img src='",d.picUrl,"' /></a>"].join("") }
            // ,{"title":"视频",field:"videoUrl"}
            ,{"title":"音频",field:"voiceUrl"}
            ,{"title":"排序",field:"serialNumber"}
            ,{"title":"操作",toolbar:'<div><a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a></div>'}
        ];
        // 重点词汇
        var cols3=[
            {"fixed":"left",type:"checkbox",width:50}
            ,{"title":"编号",type:"numbers",width:50}
            ,{"title":"词汇",field:"wordName"}
            // ,{"title":"配图",field:"picUrl"}
            ,{title:"配图",field:"picUrl",templet: d=>["<a target='_blank' href='",d.picUrl,"' ><img src='",d.picUrl,"' /></a>"].join("") }
            ,{"title":"读音",field:"wordUrl"}
            ,{"title":"排序",field:"serialNumber"}
            ,{"title":"操作",toolbar:'<div><a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a></div>'}
        ];
        // 跟读训练
        var cols4=[
            {"fixed":"left",type:"checkbox",width:50}
            ,{"title":"编号",type:"numbers",width:50}
            ,{"title":"短句",field:"sentenceName"}
            ,{"title":"读音",field:"sentenceUrl"}
            ,{"title":"排序",field:"serialNumber"}
            ,{"title":"操作",toolbar:'<div><a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a></div>'}
        ];
        // 居中
        [cols1,cols2,cols3,cols4].forEach(i=>i.forEach(i=>i.align="center"));

        window.TYPE = 1;
        //监听Tab切换
        element.on("tab(types)",x => {
            window.TYPE=x.index+1;
            keywords.placeholder="请输入"+[,"视频标题","音频标题","词汇","短语"][TYPE];
        });

        var where = () => ({
            keywords:keywords.value 
            ,courseId:"${courseId}"
        });

        // 刷新相应标签页的表格
        var reolad = x => window["table"+TYPE].reload({ where : where() });
        //重置
        form.on('submit(btnReset)',d =>{
            keywords.value = "";
            reolad();
        });
        //添加
        form.on('submit(btnAdd)',d =>showEditModel({flag:"add"}));
        // 查询
        form.on('submit(btnSearch)',d =>reolad());
        // 批量删除
        // type 类型  1.视频 2.音频 3.重点词汇 4.跟读训练
        form.on('submit(btnDel)',d =>{
            var checkStatus = table.checkStatus("type"+TYPE);
            if(checkStatus&&checkStatus.data&&checkStatus.data.length){
                top.layer.confirm(["确定要删除所选的",checkStatus.data.length,"条数据吗?<br>此操作不可还原!"].join("")
                    ,r => doPost("delCourseDetail",{type:TYPE,ids:checkStatus.data.map(i=>i.id).join()}));
            }
        });
        // 工具条点击事件
        table.on('tool(TABLE)',function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            data.flag = layEvent;
            data.type = TYPE;
            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            }
        });


        // type 类型  1.视频 2.音频 3.重点词汇 4.跟读训练
        function batchInitTables(type){
            // var insTb = table.render({
                window["table"+type] = table.render({
                elem: '#type'+type,
                cellMinWidth: 100,
                url: 'getListPage?type='+type,
                page: true,
                where : where(),
                cols: [ [,cols1,cols2,cols3,cols4][type] ]
            });
        }
        // 渲染表格
        for(let i=1;i<5;i++)batchInitTables(i);

        function doPost(url,data,args){
            top.layer.load(2);
            console.log(data);
            $.post(url, data , function (res){
                top.layer.closeAll('loading');
                let isOk = [0,200].includes(res.code);
                if(res.msg)top.layer.msg(res.msg, {icon: isOk ? 1 :2});
                if(isOk){
                    reolad();//刷列表
                    if(typeof args == "function")args(res);//回调
                }
            }, 'json');
        }

        var uploads = (a,b) => $(a).val(b||"").text(!b?"未上传":"已上传").css("color",!b ? "red" : "green");
        var imgs = (x) => !x?"+":["<img src='"+x+"' style='width:180px;height:180px;position:absolute;left:0;top:0;' />"].join("");
        // 新增/修改 弹出框
        function showEditModel(data){
            console.log(data);
            data.type=TYPE;
            data.courseId="${courseId}";
            layer.open({
                type: 1,
                title: [" 视频 音频 重点词汇 跟读训练".split()[data.type],data.flag=="add" ? "新增" :"修改"].join(""),
                skin: "layui-layer-rim",
                maxmin:true,
                area: ["500px",[,520,520,500,300][TYPE]+"px"],
                content: window["form"+TYPE].innerHTML,
                success:(layero, dIndex)=>{
                    console.log(data);
                    // 初始化模板
                    if(TYPE==1){
                        uplaod1.innerHTML=imgs(data.picUrl);
                        uploads(".js-upload-2",data.videoUrl);
                        uploads(".js-upload-3",data.voiceUrl);
                    }
                    if(TYPE==2){
                        uplaod1.innerHTML=imgs(data.picUrl);
                        // uploads(".js-upload-2",data.videoUrl);
                        uploads(".js-upload-3",data.voiceUrl);
                    }
                    if(TYPE==3){
                        uplaod1.innerHTML=imgs(data.picUrl);
                        uploads(".js-upload-3",data.wordUrl);
                    };
                    if(TYPE==4){
                        uploads(".js-upload-3",data.sentenceUrl);
                    }
                    

                    initUpload("#uplaod1",{accept:"images",acceptMime:"image/*"},r=>{
                        uplaod1.innerHTML=imgs(r);
                        $(".js-upload-1").val(r);
                    });
                    initUpload("#uplaod2",{accept:"video",acceptMime:"video/mp4"},r=>uploads(".js-upload-2",r));
                    initUpload("#uplaod3",{accept:"audio",acceptMime:"audio/mpeg,audio/x-mpeg,audio/x-wav"},r=>uploads(".js-upload-3",r));
                    // 初始化模板数据
                    form.val('modelForm',data); 
                    // 提交
                    form.on('submit(modelFormSubmit)', function(d){
                        doPost("crudCourseDetail",{jsonStr: JSON.stringify(d.field)},r=>layer.close(dIndex));
                        return false;
                    });
                }
            });
        }
        
        // 统一文件上传
        function initUpload(elem,obj,fun,multiple){
            if(!$(elem).length)return;
            return upload.render(Object.assign(obj,{
                elem
                // ,accept:"file"
                ,url: "/upload/uploadFile"
                ,field:"file"
                ,multiple:multiple||false
                ,before: x => top.layer.load(3)
                ,error: x => top.layer.closeAll("loading")
                ,done: function(res){
                    top.layer.closeAll("loading");
                    if([0,200].includes(res.code)&&res.msg&&res.msg!="null"){
                        // target.value = res.msg;
                        if(fun)fun(res.msg);
                    }
                }
            }));
        }

    });
</script>
<style>
    #uplaod1{width:180px;height:180px;line-height:180px;font-size:180px;overflow:hidden;text-align:center;cursor:pointer;color:#666;border:1px dashed #666;position:relative;};
</style>
<!-- 表单弹窗 -->
<script type="text/html" id="form1">
    <form id="modelForm" lay-filter="modelForm" class="layui-form model-form">
        <input type="hidden" name="id" />
        <input type="hidden" name="flag" />
        <input type="hidden" name="type" />
        <input type="hidden" name="courseId" />
        <input type="hidden" name="picUrl" class="js-upload-1" lay-reqtext="请上传封面" lay-verify="required" lay-verType="msg" />
        <input type="hidden" name="videoUrl" class="js-upload-2" lay-reqtext="请上传视频" lay-verify="required" lay-verType="msg" />
        <input type="hidden" name="voiceUrl" class="js-upload-3" lay-reqtext="请上传音频" lay-verify="required" lay-verType="msg" />
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input name="videoName" placeholder="请输入" lay-verify="required" lay-verType="tips" type="text" autocomplete="off" class="layui-input"/>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">封面</label>
            <div class="layui-input-inline"><div id="uplaod1">+</div></div>
            <div class="layui-form-mid layui-word-aux">推荐尺寸：290*290px</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">视频</label>
            <div class="layui-input-inline" style="width:120px;">
                <button type="button" class="layui-btn" id="uplaod2"><i class="layui-icon layui-icon-upload"></i>上传文件</button>
            </div>
            <strong class="layui-form-mid js-upload-2"></strong>
            <div class="layui-form-mid layui-word-aux">仅限mp4</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">音频</label>
            <div class="layui-input-inline" style="width:120px;">
                <button type="button" class="layui-btn" id="uplaod3"><i class="layui-icon layui-icon-upload"></i>上传文件</button>
            </div>
            <strong class="layui-form-mid js-upload-3"></strong>
            <div class="layui-form-mid layui-word-aux">仅限mp3,wav</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input name="serialNumber" placeholder="请输入" lay-verify="required|number" lay-verType="tips" type="text" autocomplete="off" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item text-center js-bottom-btn">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="modelFormSubmit" lay-submit>保存</button>
        </div>
    </form> 
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="form2">
    <form id="modelForm" lay-filter="modelForm" class="layui-form model-form">
        <input type="hidden" name="id" />
        <input type="hidden" name="flag" />
        <input type="hidden" name="type" />
        <input type="hidden" name="courseId" />
        <input type="hidden" name="picUrl" class="js-upload-1" lay-reqtext="请上传封面" lay-verify="required" lay-verType="msg" />
        <input type="hidden" name="voiceUrl" class="js-upload-3" lay-reqtext="请上传音频" lay-verify="required" lay-verType="msg" />
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input name="videoName" placeholder="请输入" lay-verify="required" lay-verType="tips" type="text" autocomplete="off" class="layui-input"/>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">封面</label>
            <div class="layui-input-inline"><div id="uplaod1">+</div></div>
            <div class="layui-form-mid layui-word-aux">推荐尺寸：290*290px</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">音频</label>
            <div class="layui-input-inline" style="width:120px;">
                <button type="button" class="layui-btn" id="uplaod3"><i class="layui-icon layui-icon-upload"></i>上传文件</button>
            </div>
            <strong class="layui-form-mid js-upload-3"></strong>
            <div class="layui-form-mid layui-word-aux">仅限mp3,wav</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input name="serialNumber" placeholder="请输入" lay-verify="required|number" lay-verType="tips" type="text" autocomplete="off" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item text-center js-bottom-btn">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="modelFormSubmit" lay-submit>保存</button>
        </div>
    </form> 
</script>

<script type="text/html" id="form3">
    <form id="modelForm" lay-filter="modelForm" class="layui-form model-form">
        <input type="hidden" name="id" />
        <input type="hidden" name="flag" />
        <input type="hidden" name="type" />
        <input type="hidden" name="courseId" />
        <input type="hidden" name="picUrl" class="js-upload-1" lay-reqtext="请上传配图" lay-verify="required" lay-verType="msg" />
        <input type="hidden" name="wordUrl" class="js-upload-3" lay-reqtext="请上传读音" lay-verify="required" lay-verType="msg" />
        <div class="layui-form-item">
            <label class="layui-form-label">词汇</label>
            <div class="layui-input-block">
                <input name="wordName" placeholder="请输入" lay-verify="required" lay-verType="tips" type="text" autocomplete="off" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">配图</label>
            <div class="layui-input-inline"><div id="uplaod1">+</div></div>
            <div class="layui-form-mid layui-word-aux">推荐尺寸：290*290px</div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">读音</label>
            <div class="layui-input-inline" style="width:120px;">
                <button type="button" class="layui-btn" id="uplaod3"><i class="layui-icon layui-icon-upload"></i>上传文件</button>
            </div>
            <strong class="layui-form-mid js-upload-3"></strong>
            <div class="layui-form-mid layui-word-aux">仅限mp3,wav</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input name="serialNumber" placeholder="请输入" lay-verify="required|number" lay-verType="tips" type="number" autocomplete="off" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item text-center js-bottom-btn">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="modelFormSubmit" lay-submit>保存</button>
        </div>
    </form>
</script>


<script type="text/html" id="form4">
    <form id="modelForm" lay-filter="modelForm" class="layui-form model-form">
        <input type="hidden" name="id" />
        <input type="hidden" name="flag" />
        <input type="hidden" name="type" />
        <input type="hidden" name="courseId" />
        <input type="hidden" name="sentenceUrl" class="js-upload-3" lay-reqtext="请上传读音" lay-verify="required" lay-verType="msg"/>
        <div class="layui-form-item">
            <label class="layui-form-label">短句</label>
            <div class="layui-input-block">
                <input name="sentenceName" placeholder="请输入" lay-verify="required" lay-verType="tips" type="text" autocomplete="off" class="layui-input"/>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">读音</label>
            <div class="layui-input-inline" style="width:120px;">
                <button type="button" class="layui-btn" id="uplaod3"><i class="layui-icon layui-icon-upload"></i>上传文件</button>
            </div>
            <strong class="layui-form-mid js-upload-3"></strong>
            <div class="layui-form-mid layui-word-aux">仅限mp3,wav</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input name="serialNumber" placeholder="请输入" lay-verify="required|number" lay-verType="tips" type="number" autocomplete="off" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item text-center js-bottom-btn">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="modelFormSubmit" lay-submit>保存</button>
        </div>
    </form>
</script>

</body>
</html>